import React, { useState } from "react";
import { Switch, Route, Redirect } from "react-router-dom";
import GlobalContext from "@src/common/global-context";
import { renderAllRoutes } from "@routes/route-loader";
import { RootDispatch, RootState, MapStateFromStoreProps, MapDispatchFromStoreProps, RouterProps } from "@src/store";
import { connect } from "@store/connect";

function mapStateToProps(state: RootState) {
  const { login } = state;
  return { ...login };
}

function mapDispatchToProps(dispatch: RootDispatch) {
  const { login } = dispatch;
  return {
    fetchTouristInfo: login.fetchTouristInfo,
  };
}

type AppProps = RouterProps &
  MapStateFromStoreProps<typeof mapStateToProps> &
  MapDispatchFromStoreProps<typeof mapDispatchToProps> & {
    routes?: any;
  };

@connect(mapStateToProps, mapDispatchToProps)
class App extends React.PureComponent<AppProps> {
  globalContext;

  constructor(props) {
    super(props);
    this.globalContext = {
      name: "React Typescript Tempalte",
    };
  }

  componentDidMount(): void {
    const { isLogin, fetchTouristInfo } = this.props;
    if (isLogin) {
      fetchTouristInfo();
    }
  }

  render() {
    const { routes } = this.props;
    const router = renderAllRoutes(routes);
    return (
      <GlobalContext.Provider value={this.globalContext}>
        <Switch>
          <Switch>{router}</Switch>
        </Switch>
      </GlobalContext.Provider>
    );
  }
}
export default App;
